
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>SWA - Scripting for Web Applications | Shopping Cart</title>
	<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/jquery-ui-1.8.11.custom.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/bg.css" type="text/css" media="screen" />
	
</head>
<body>
	<img id="bgimg" src="images/bg.jpg" />
	<div id="realBody">
	 <div id="wrapper">
		<div id="content">
			<header>
				<h1><a href="/">mifoodcourt.com</a></h1>
			</header>

			<section id="products">
				<p>Bienvenido a mifoodcourt.com, Arrastre el plato que desea a su cesta de pedido, ubicado a lado derecho.</p>            
				<div class="product" id="0001" title="jQuery Logo"><a href="../5.jpg" class="lightbox">
					<img src="../2.jpg" alt="jQuery T-Shirt" class="default"  /></a>
					<div class="product-info">
						<h2 class="product-title">Lorem ipsum media</h2>
						<p class="id">0001</p>
						<p class="product-type">T-Shirt</p>
						<p class="product-description">Flaunt your jQuery expertise in the most obvious way possible, with the official logo on your chest.</p>
					</div>
					<p class="price">S/. 10.99</p>	
				</div>
                
                <div class="product" id="0002" title="jQuery Logo"><a href="../3.jpg" class="lightbox">
					<img src="../3.jpg" alt="jQuery T-Shirt" class="default"  /></a>
					<div class="product-info">
						<h2 class="product-title">Lorem ipsum media</h2>
						<p class="id">0002</p>
						<p class="product-type">T-Shirt</p>
						<p class="product-description">Flaunt your jQuery expertise in the most obvious way possible, with the official logo on your chest.</p>
					</div>
					<p class="price">S/. 20.00</p>	
				</div>
                
                <div class="product" id="0003" title="jQuery Logo"><a href="../7.jpg" class="lightbox">
					<img src="../7.jpg" alt="jQuery T-Shirt" class="default"  /></a>
					<div class="product-info">
						<h2 class="product-title">Lorem ipsum mediao</h2>
						<p class="id">0003</p>
						<p class="product-type">T-Shirt</p>
						<p class="product-description">Flaunt your jQuery expertise in the most obvious way possible, with the official logo on your chest.</p>
					</div>
					<p class="price">S/. 18.99</p>	
				</div>
                
                <div class="product" id="0004" title="jQuery Logo"><a href="../9.jpg" class="lightbox">
					<img src="../9.jpg" alt="Lorem Ipsum" class="default"  /></a>
					<div class="product-info">
						<h2 class="product-title">Krem ipsum media</h2>
						<p class="id">0004</p>
						<p class="product-type">T-Shirt</p>
						<p class="product-description">Flaunt your jQuery expertise in the most obvious way possible, with the official logo on your chest.</p>
					</div>
					<p class="price">$4.99</p>	
				</div>
                
                <div class="product" id="0005" title="jQuery Logo"><a href="../5.jpg" class="lightbox">
					<img src="../5.jpg" alt="Lorem Ipsum" class="default"  /></a>
					<div class="product-info">
						<h2 class="product-title">Krem ipsum media</h2>
						<p class="id">0005</p>
						<p class="product-type">T-Shirt</p>
						<p class="product-description">Flaunt your jQuery expertise in the most obvious way possible, with the official logo on your chest.</p>
					</div>
					<p class="price">$7.99</p>	
				</div>
                
                <div class="product" id="0006" title="jQuery Logo"><a href="../7.jpg" class="lightbox">
					<img src="../7.jpg" alt="Lorem Ipsum" class="default"  /></a>
					<div class="product-info">
						<h2 class="product-title">Krem ipsum media</h2>
						<p class="id">0006</p>
						<p class="product-type">T-Shirt</p>
						<p class="product-description">Flaunt your jQuery expertise in the most obvious way possible, with the official logo on your chest.</p>
					</div>
					<p class="price">$12.99</p>	
				</div>
                
			</section>
			<aside>
				<div id="followbox"></div>
				<div id="cart">
					<h2>Su cesta de pedido</h2>
					<p>Realice su pedido, arrastrando su plato de selecci&oacute;n a la seccion de abajo.</p>
					<div class="dropzone"><p>Arrastre su plato aqu&iacute;.</p></div>
					<div class="cart-content">
						<ol>
							<li class="placeholder">Usted no tiene items en su cesta.</li>
						</ol>
					</div>
					<div class="empty">Limpiar la cesta.</div>
					<div class="empty2">Finalizar</div>

				</div>
			</aside>
			<div id="dialog-confirm" title="Empty Cart">Are you sure you want to empty the contents of your shopping cart.</div>		
			<footer>
				<p>&copy;2013 mifoodcourt.com - Todos los derechos reservados.</p>
			</footer>
            
            <style>
#loremipsum form { background:#eee; padding:15px; font-family:verdana; font-size:11px; width:310px; left:10px;   }
#loremipsum form fieldset {border:1px solid #eee; }
#loremipsum form fieldset legend { font-weight:bold; padding:6px;  } 
#loremipsum form input[type="text"], #loremipsum form input[type="email"] { border:1px solid #333; background:#FBF9C0; border-radius:6px; padding:2px 3px; }
#loremipsum form label { display:block; margin-bottom:6px; width:120px; height:35px;  }   
#loremipsum form input[type="reset"], #loremipsum form input[type="button"], #loremipsum form input[type="submit"]  {width:80px; border:1px solid #333; padding:2px 4px; margin-right:10px;  }

</style>
            
           <div id="loremipsum" style="display:none;" > 
            <form>
             <fieldset><legend> Información personal:  </legend>
             <label>Nombres: <input type="text" required=""></label>
             <label>Dirección: <input type="text"></label>
             <label>Teléfono: <input type="text" required=""></label>
			 <label>Email: <input type="email"></label>
             <input type="submit" value="Enviar" name="btnEnviar">     
             <input type="reset" value="Cancelar" name="btnCancelar">     
             </fieldset>
            </form>
            
            </div>

            
		</div>
	</div>
 </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jfollow.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
<script type="text/javascript" src="js/fullscreenr.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.capty.css"/>
<script type="text/javascript" src="js/jquery.capty.min.js"></script>

<script type="text/javascript">  
	var FullscreenrOptions = {  width: 1322, height: 897, bgID: '#bgimg' };
	jQuery.fn.fullscreenr(FullscreenrOptions);
	$(function() {

			$('.default').capty({ animation: 'fixed'});
	});
	
</script>

<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.ie6.css" />
<![endif]-->
<script type="text/javascript" src="js/lightbox/jquery.lightbox.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($){
    $('.lightbox').lightbox();
  });
</script>

</body>
</html>